<template>
	<view>
		<view class="header">
			<input type="text" value="" v-model="keyword" placeholder="请输入关键字" />
			<view @click="clickSearch">搜索</view>
		</view>
		<view class="middle">
			<view class="title histitle">历史记录</view>
			<view class="del" @click="delHisList">
				<image src="../../static/cm2_playlist_icn_delete@2x.png" mode="widthFix"></image>
			</view>
			<view class="log">
				<block v-for="(item,index) in hisList" :key="index"><view class="logitem" @click="goResult(item)">{{item}}</view></block>
			</view>
		</view>
		<view class="bottom">
			<view class="title">热搜榜</view>
			
			<view>
				<block v-for="(item,index) in searchList" :key="index">
					<view class="searchitem" @click="goResult(item.searchWord)">
						<view class="itemleft":class="index<=3?'hot':''">{{index+1}}</view>
						<view class="itemcenter">
							<view class="centerone">
								<view class="itemtitle">
									{{item.searchWord}}
								</view>
								<image v-if="item.iconUrl" :class="item.iconUrl=='https://p1.music.126.net/PtgUJbcvDAY0HKWpmOB2HA==/109951163967988470.png'?'setwidth':''" :src="item.iconUrl" mode="heightFix"></image>
							</view>
							<view class="centertwo">{{item.content}}</view>
						</view>
						<view class="itemright">
							{{item.score}}
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
import { searchRequest } from '../../api/search.js';
export default {
	data() {
		return {
			keyword: '',
			searchList:[],
			hisList:uni.getStorageSync("hisList")||[],
		};
	},
	onLoad() {
		this.getSearch();
	},
	methods: {
		async getSearch() {
			let result = await searchRequest({
				url: '/search/hot/detail'
			});
			this.searchList=result[1].data.data
		},
		clickSearch(){
			if(this.hisList.length==10){
				this.hisList=this.hisList.splice(1,this.hisList.length-1)
			}
			this.hisList.push(this.keyword)
			uni.setStorageSync("hisList",this.hisList)
			this.goResult(this.keyword)
		},
		delHisList(){
			this.hisList=[]
			uni.setStorageSync("hisList",this.hisList)
		},
		goResult(searchWord){
			uni.navigateTo({
				url:"../result/result?keyword="+searchWord
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.header {
	display: flex;
	margin: 10upx;
	.uni-input-wrapper {
		width: 80%;
	}
	input {
		padding: 10upx;
		width: 98%;
		border-bottom: 2upx solid #f1f1f1;
	}
	view {
		width: 20%;
		padding: 10upx;
		text-align: right;
		color: #a5a5a5;
	}
}
.title{
	font-size: 30upx;
	font-weight: 600;
	margin: 20upx 0upx;
}
.middle {
	margin: 10upx 20upx;
	font-size: 28upx;
	position: relative;
	.del{
		position: absolute;
		right: 10upx;
		top:5upx;
		width: 30upx;
		image{
			width: 30upx;
		}
	}
	.log{
		display: flex;
		flex-wrap:wrap;
		.logitem{
			height: 50upx;
			line-height: 50upx;
			padding:0upx 30upx;
			margin: 10upx;
			font-size: 26upx;
			background: #e6e6e6;
			border-radius: 50upx;
		}
	}
}
.bottom {
	margin: 10upx 20upx;
	font-size: 28upx;
	.searchitem{
		height: 90upx;
		margin: 20upx;
		display: flex;
		.itemleft{
			flex:1;
			display: flex;
			// justify-content: center;
			align-items: center;
		}
		.itemcenter{
			flex:4;
			.centerone{
				display: flex;
				image{
					height: 30upx;
					width: 60upx;
					margin-left: 10upx;
				}
				.setwidth{
					width: 30upx;
				}
			}
			.centertwo{
				margin-top:10upx;
				font-size: 24upx;
				color:#cfcfcf;
			}
		}
		.itemright{
			flex:2;
			display: flex;
			justify-content: center;
			align-items: center;
			color:#bfbfbf;
		}
	}
}
.hot{
	color:red;
}
</style>
